<template>
  <el-card class="main-card">
    <div class="title">{{ this.$route.name }}</div>
    <div class="operation-container">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="openModel(null)"> 新增菜单 </el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="menus"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column prop="name" label="菜单名称" width="140" show-overflow-tooltip/>
      <el-table-column prop="fatherName" label="顶级分类" width="140" />
      <el-table-column prop="fatherId" label="分类ID" width="80" />
      <el-table-column prop="icon" align="center" label="图标" width="200" show-overflow-tooltip />
      <el-table-column prop="attribute" align="center" label="额外属性" width="200" show-overflow-tooltip />
      <el-table-column prop="path" label="访问路径" show-overflow-tooltip/>
      <el-table-column prop="target" label="是否外链" align="center">
        <template slot-scope='scope'>
          <el-tag type='warning' v-if='scope.row.target === 1'>是</el-tag>
          <el-tag type="success" v-else-if='scope.row.target === 0'>否</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="150">
        <template slot-scope="scope">
          <i class="el-icon-time" style="margin-right: 5px" />
          {{ scope.row.createTime | date }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" fixed='right'>
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="openModel(scope.row, 1)" v-if="scope.row.children">
            <i class="el-icon-plus" /> 新增
          </el-button>
          <el-button type="text" size="mini" @click="openModel(scope.row, 2)">
            <i class="el-icon-edit" /> 修改
          </el-button>
          <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="deleteMenu(scope.row.id)">
            <el-button size="mini" type="text" slot="reference"> <i class="el-icon-delete" /> 删除 </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="addMenu" width="30%" top="12vh">
      <div class="dialog-title-container" slot="title" ref="menuTitle" />
      <el-form label-width="80px" size="medium" :model="menuForm">
        <el-form-item label="菜单类型" v-if="show">
          <el-radio-group v-model="isCatalog">
            <el-radio :label="false">目录</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="menuForm.name" style="width: 220px" />
        </el-form-item>
        <el-form-item label="访问路径">
          <el-input v-model="menuForm.path" style="width: 220px" />
        </el-form-item>
        <el-form-item label="菜单分类">
          <el-select v-model='menuForm.fatherId' :disabled='isCatalog' placeholder='请选择类型'>
            <el-option v-for='item in category' :key='item.id' :label='item.name' :value='item.id' />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input v-model="menuForm.icon" style="width: 220px" />
        </el-form-item>
        <el-form-item label="额外属性">
          <el-input v-model="menuForm.attribute" style="width: 220px" />
        </el-form-item>
        <el-form-item label="外部跳转">
          <el-radio-group v-model="menuForm.target">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addMenu = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateMenu"> 确 定 </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  created() {
    this.listMenus()
    this.listCategory()
  },
  data() {
    return {
      loading: true,
      addMenu: false,
      isCatalog: false,
      show: true,
      menus: [],
      category: [],
      menuForm: {
        id: null,
        name: '',
        icon: '',
        fatherId: '',
        path: '',
        attribute: 1,
        parentId: null,
        target: 0
      }
    }
  },
  methods: {
    listMenus() {
      this.axios
        .get('/api/admin/blog/menus')
        .then(({ data }) => {
          this.menus = data.data
          this.loading = false
        })
    },
    listCategory(){
      this.axios
        .get('/api/admin/blog/menus/category/list')
        .then(({ data }) => {
          this.category = data.data
        })
    },
    openModel(menu, type) {
      if (menu) {
        this.show = false
        this.isCatalog = true
        switch (type) {
          case 1:
            this.menuForm = {
              id: null,
              name: '',
              icon: '',
              fatherId: menu.fatherId,
              path: '',
              target: 0,
              parentId: null,
              attribute: ''
            }
            this.$refs.menuTitle.innerHTML = '新增菜单'
            this.menuForm.parentId = JSON.parse(JSON.stringify(menu.id))
            break
          case 2:
            this.$refs.menuTitle.innerHTML = '修改菜单'
            this.menuForm = JSON.parse(JSON.stringify(menu))
            break
        }
      } else {
        this.$refs.menuTitle.innerHTML = '新增菜单'
        this.show = true
        this.menuForm = {
          id: null,
          name: '',
          icon: '',
          fatherId: '',
          path: '',
          target: 0,
          parentId: null,
          attribute: ''
        }
      }
      this.addMenu = true
    },
    checkIcon(icon) {
      this.menuForm.icon = icon
    },
    saveOrUpdateMenu() {
      if (this.menuForm.name.trim() === '') {
        this.$message.error('菜单名不能为空')
        return false
      }
      if (this.menuForm.fatherId === null) {
        this.$message.error('菜单组件分类不能为空')
        return false
      }
      if (this.menuForm.path.trim() === '') {
        this.$message.error('菜单访问路径不能为空')
        return false
      }
      this.axios.post('/api/admin/blog/menus', this.menuForm).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: '成功',
            message: '操作成功'
          })
          this.listMenus()
        } else {
          this.$notify.error({
            title: '失败',
            message: '操作失败'
          })
        }
        this.addMenu = false
      })
    },
    deleteMenu(id) {
      this.axios.delete('/api/admin/blog/menus/' + id).then(({ data }) => {
        if (data.flag) {
          this.$notify.success({
            title: '成功',
            message: '删除成功'
          })
          this.listMenus()
        } else {
          this.$notify.error({
            title: '失败',
            message: data.message
          })
        }
      })
    }
  }
}
</script>
